<template>
	<div class="flex-row container">
		<div>
			<span class="no">{{no}}</span>
		</div>
		<div class="flex-row data-key" v-show="this.$store.state.show_key">
			<span>键</span>
			<input/>
		</div>
		<div class="flex-row data-value">
			<span>值</span>
			<input/>
		</div>
		<div class="flex-row data-type" v-show="this.$store.state.show_type">
			<span>类型</span>
			<input/>
		</div>
		<button class="cancel" @click="deleteLine">—</button>
	</div>
</template>

<script>
	export default {
		name:'DataBar',
		props:{
			id:String,
			no:Number,
		},
		data(){
			return {
			}
		},
		methods:{
			deleteLine(){
				this.$emit('minus',this.id);
			}
		}
	}
</script>

<style scoped>
	.flex-row{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.flex-row span{
		margin-right: 5px;
	}
	.flex-row div{
		margin-left: 10px;
	}
	.container{
		font-size: 20px;
		margin-bottom: 5px;
		height: 25px;
	}
	.no{
		width: 40px;
		display: inline-block;
	}
	input{
		height: 20px;
	}
	.data-type span{
		width: 40px;
	}
	.cancel{
		height: 26px;
		width: 26px;
		background-color: #FFC107;
		margin-left: 10px;
	}
</style>
